/**
 * 微信语音动画测试页面
 */

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { WeChatVoiceAnimation } from './components/AnimatedComponents/WeChatVoiceAnimation';
import { SafeAreaView } from 'react-native-safe-area-context';

// ==================== 示例1: 基础用法 ====================
const BasicExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例1: 基础用法</Text>
      <View style={styles.exampleContent}>
        <TouchableOpacity
          style={[styles.button, playing && styles.buttonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.buttonText}>
            {playing ? '停止播放' : '开始播放'}
          </Text>
        </TouchableOpacity>

        <View style={styles.demoArea}>
          <WeChatVoiceAnimation playing={playing} customSize={100} strokeWidth={5} />
          <Text style={styles.hintText}>
            💡 点击按钮控制动画播放/停止
          </Text>
        </View>
      </View>
    </View>
  );
};

// ==================== 示例2: 不同尺寸 ====================
const SizeExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例2: 不同尺寸</Text>
      <View style={styles.exampleContent}>
        <TouchableOpacity
          style={[styles.button, playing && styles.buttonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.buttonText}>
            {playing ? '停止' : '播放'}
          </Text>
        </TouchableOpacity>

        <View style={styles.row}>
          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} size="small" />
            <Text style={styles.label}>Small</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} size="medium" />
            <Text style={styles.label}>Medium</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} size="large" />
            <Text style={styles.label}>Large</Text>
          </View>
        </View>

        <Text style={styles.hintText}>
          💡 支持 small、medium、large 三种预设尺寸
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例3: 不同颜色 ====================
const ColorExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例3: 不同颜色</Text>
      <View style={styles.exampleContent}>
        <TouchableOpacity
          style={[styles.button, playing && styles.buttonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.buttonText}>
            {playing ? '停止' : '播放'}
          </Text>
        </TouchableOpacity>

        <View style={styles.row}>
          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} color="#07C160" />
            <Text style={styles.label}>微信绿</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} color="#007AFF" />
            <Text style={styles.label}>iOS 蓝</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} color="#FF3B30" />
            <Text style={styles.label}>红色</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} color="#34C759" />
            <Text style={styles.label}>绿色</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} color="#FF9500" />
            <Text style={styles.label}>橙色</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} color="#AF52DE" />
            <Text style={styles.label}>紫色</Text>
          </View>
        </View>

        <Text style={styles.hintText}>
          💡 可以自定义任意颜色
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例4: 不同速度 ====================
const SpeedExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例4: 不同速度</Text>
      <View style={styles.exampleContent}>
        <TouchableOpacity
          style={[styles.button, playing && styles.buttonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.buttonText}>
            {playing ? '停止' : '播放'}
          </Text>
        </TouchableOpacity>

        <View style={styles.row}>
          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} frameDuration={150} />
            <Text style={styles.label}>快速</Text>
            <Text style={styles.subLabel}>(150ms)</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} frameDuration={300} />
            <Text style={styles.label}>正常</Text>
            <Text style={styles.subLabel}>(300ms)</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation playing={playing} frameDuration={600} />
            <Text style={styles.label}>慢速</Text>
            <Text style={styles.subLabel}>(600ms)</Text>
          </View>
        </View>

        <Text style={styles.hintText}>
          💡 通过 frameDuration 控制每帧持续时间
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例5: 自定义尺寸和线宽 ====================
const CustomSizeExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例5: 自定义尺寸和线宽</Text>
      <View style={styles.exampleContent}>
        <TouchableOpacity
          style={[styles.button, playing && styles.buttonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.buttonText}>
            {playing ? '停止' : '播放'}
          </Text>
        </TouchableOpacity>

        <View style={styles.row}>
          <View style={styles.item}>
            <WeChatVoiceAnimation
              playing={playing}
              customSize={40}
              strokeWidth={2}
            />
            <Text style={styles.label}>40px</Text>
            <Text style={styles.subLabel}>线宽: 2</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation
              playing={playing}
              customSize={50}
              strokeWidth={3}
            />
            <Text style={styles.label}>50px</Text>
            <Text style={styles.subLabel}>线宽: 3</Text>
          </View>

          <View style={styles.item}>
            <WeChatVoiceAnimation
              playing={playing}
              customSize={60}
              strokeWidth={4}
            />
            <Text style={styles.label}>60px</Text>
            <Text style={styles.subLabel}>线宽: 4</Text>
          </View>
        </View>

        <Text style={styles.hintText}>
          💡 可以完全自定义尺寸和线宽
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例6: 使用场景 - 聊天消息 ====================
const ChatSceneExample: React.FC = () => {
  const [playingId, setPlayingId] = useState<number | null>(null);

  const messages = [
    { id: 1, duration: 3, isSelf: false },
    { id: 2, duration: 5, isSelf: true },
    { id: 3, duration: 10, isSelf: false },
    { id: 4, duration: 7, isSelf: true },
  ];

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例6: 使用场景 - 聊天消息</Text>
      <View style={styles.exampleContent}>
        <View style={styles.chatContainer}>
          {messages.map(msg => (
            <View
              key={msg.id}
              style={[
                styles.messageRow,
                msg.isSelf && styles.messageRowSelf,
              ]}
            >
              <TouchableOpacity
                style={[
                  styles.voiceMessage,
                  msg.isSelf && styles.voiceMessageSelf,
                ]}
                onPress={() =>
                  setPlayingId(playingId === msg.id ? null : msg.id)
                }
              >
                <WeChatVoiceAnimation
                  playing={playingId === msg.id}
                  size="small"
                  color={msg.isSelf ? '#FFFFFF' : '#07C160'}
                />
                <Text
                  style={[
                    styles.durationText,
                    msg.isSelf && styles.durationTextSelf,
                  ]}
                >
                  {msg.duration}"
                </Text>
              </TouchableOpacity>
            </View>
          ))}
        </View>

        <Text style={styles.hintText}>
          💡 点击语音消息播放/停止
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例7: 多个独立控制 ====================
const MultipleControlExample: React.FC = () => {
  const [playingStates, setPlayingStates] = useState<boolean[]>([
    false,
    false,
    false,
    false,
  ]);

  const togglePlaying = (index: number) => {
    setPlayingStates(prev =>
      prev.map((state, i) => (i === index ? !state : state)),
    );
  };

  const toggleAll = () => {
    const allPlaying = playingStates.every(s => s);
    setPlayingStates(playingStates.map(() => !allPlaying));
  };

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例7: 多个独立控制</Text>
      <View style={styles.exampleContent}>
        <TouchableOpacity style={styles.button} onPress={toggleAll}>
          <Text style={styles.buttonText}>
            {playingStates.every(s => s) ? '全部停止' : '全部播放'}
          </Text>
        </TouchableOpacity>

        <View style={styles.row}>
          {playingStates.map((playing, index) => (
            <TouchableOpacity
              key={index}
              style={styles.item}
              onPress={() => togglePlaying(index)}
            >
              <WeChatVoiceAnimation
                playing={playing}
                color={['#FF3B30', '#FF9500', '#34C759', '#007AFF'][index]}
              />
              <Text style={styles.label}>
                {playing ? '播放中' : '已停止'}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        <Text style={styles.hintText}>
          💡 每个动画可以独立控制
        </Text>
      </View>
    </View>
  );
};

// ==================== 主入口 ====================
export function TestWeChatVoice() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>微信语音动画组件</Text>
          <Text style={styles.headerSubtitle}>
            WeChatVoiceAnimation - 基于原生驱动的高性能动画
          </Text>
        </View>

        <BasicExample />
        <SizeExample />
        <ColorExample />
        <SpeedExample />
        <CustomSizeExample />
        <ChatSceneExample />
        <MultipleControlExample />

        <View style={styles.footer}>
          <Text style={styles.footerText}>
            ✨ 使用原生驱动（useNativeDriver: true），性能更优
          </Text>
          <Text style={styles.footerText}>
            🎨 基于 useFrameAnimationController 实现帧动画
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
  },
  header: {
    padding: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  headerTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333333',
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 14,
    color: '#666666',
  },
  exampleContainer: {
    marginTop: 20,
    backgroundColor: '#ffffff',
    borderRadius: 8,
    marginHorizontal: 16,
    overflow: 'hidden',
    marginBottom: 0,
  },
  exampleTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333333',
    padding: 12,
    backgroundColor: '#f9f9f9',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  exampleContent: {
    padding: 20,
    minHeight: 120,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 10,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignSelf: 'center',
    marginBottom: 20,
  },
  buttonActive: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '600',
  },
  demoArea: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    flexWrap: 'wrap',
    marginVertical: 10,
  },
  item: {
    alignItems: 'center',
    marginVertical: 10,
    minWidth: 80,
  },
  label: {
    marginTop: 8,
    fontSize: 13,
    color: '#333',
    fontWeight: '500',
  },
  subLabel: {
    marginTop: 2,
    fontSize: 11,
    color: '#999',
  },
  hintText: {
    fontSize: 13,
    color: '#999999',
    fontStyle: 'italic',
    marginTop: 16,
    textAlign: 'center',
  },
  chatContainer: {
    width: '100%',
    paddingVertical: 10,
  },
  messageRow: {
    flexDirection: 'row',
    marginVertical: 6,
    paddingHorizontal: 10,
  },
  messageRowSelf: {
    justifyContent: 'flex-end',
  },
  voiceMessage: {
    backgroundColor: '#EEEEEE',
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    maxWidth: '70%',
  },
  voiceMessageSelf: {
    backgroundColor: '#07C160',
  },
  durationText: {
    color: '#333333',
    fontSize: 13,
    fontWeight: '500',
  },
  durationTextSelf: {
    color: '#FFFFFF',
  },
  footer: {
    padding: 20,
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 40,
  },
  footerText: {
    fontSize: 13,
    color: '#999999',
    textAlign: 'center',
    marginVertical: 4,
  },
});

